본문으로 건너뛰기

실행 컨텍스트

실행 컨텍스트는 소스코드를 실행 시 필요한 환경을 제공하고 모든 코드의 실행 결과를 관리하는 영역이다.

🧑🏻‍💻 소스코드​

✅ 타입​

4가지 타입의 소스코드를 평가하여 실행 컨텍스트를 생성한다.

소스코드의 타입설명
전역 코드전역에 존재하는 소스코드 (전역에 정의된 함수, 클래스 등의 내부 코드는 포함 X)
함수 코드함수 내부에 존재하는 소스코드 (함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함 X)
모듈 코드모듈 내부에 존재하는 소스코드 (모듈 내부의 함수, 클래스 등의 내부 코드는 포함 X)
eval 코드eval 함수에 인수로 전달되어 실행되는 소스코드
  • 소스코드를 4가지 타입으로 구분하는 이유는 타입에 따라 실행 컨텍스트 생성 과정과 관리 내용이 다르기 때문이다.

✏️ 전역 코드 → 전역 실행 컨텍스트​

  • 전역 변수를 관리하기 위해 최상위 스코프인 전역 스코프를 생성해야 한다.
  • 전역 객체와 연결해야 한다.

✏️ 함수 코드 → 함수 실행 컨텍스트​

  • 함수가 호출될 때 실행 컨택스트가 생성된다.
  • 지역 변수, 매개변수, arguments 객체를 관리하기 위해 지역 스코프를 생성해야 한다.
  • 생성한 지역 스코프를 전역 스코프에서 시작하는 스코프 체인 일원으로 연결해야 한다.

✏️ 모듈 코드 → 모듈 실행 컨텍스트로​

  • 모듈별 독립적인 모듈 스코프를 생성한다.

✏️ eval 코드 → eval 실행 컨텍스트​

  • strict mode에서 자신만의 독자적인 스코프를 생성한다.

✅ 평가와 실행​

JS 엔진은 소스코드를 평가와 실행의 과정으로 나누어 처리한다.

평가와 실행

✏️ 소스코드 평가​

  • 실행 컨텍스트를 생성하고 선언문만 먼저 실행하여 생성된 변수나 함수 식별자를 키로 스코프에 등록한다.

✏️ 소스코드의 실행​

  • 선언문을 제외한 소스코드가 실행된다. 즉 런타임이 시작된다. 실행 결과는 다시 실행 컨텍스트가 관리하는 스코프에 등록된다.

✏️ 예시​

var = x;
x = 1;

  • 소스코드 평가
    변수 선언문 실행 → 실행 컨텍스트가 관리하는 스코프에 식별자 x 등록 → undefined로 초기화

  • 소스코드 실행
    x 변수가 선언된 코드인지 확인 → 값 할당 → 할당 결과를 실행 컨텍스트에 다시 등록하여 관리

🧑🏻‍💻 실행 컨텍스트​

실행 컨텍스트를 이해하면 JS가 scope를 기반으로 식별자와 바인딩 값을 관리하는 방식과 호이스팅 발생 이유, 클로저 동작 방식, 이벤트 핸들러와 비동기 처리의 동작 방식을 이해할 수 있다.

✅ 역할​

  1. 렉시컬 환경 자료구조로 식별자 등록 및 상태 변화를 관리한다.
  2. 렉시컬 환경 자료구조로 스코프 체인을 통해 식별자를 검색하고 스코프를 관리한다.
  3. 스택 자료구조로 코드 실행 순서를 관리한다.

✅ 실행 컨텍스트 렉시컬 환경​

렉시컬 환경은 식별자와 식별자에 바인딩된 값을 저장하는 환경 레코드와
상위 스코프에 대한 참조를 기록하는 외부 렉시컬 환경에 대한 참조로 구성된 자료구조이다.

  • 랙시컬 환경은 키와 값을 갖는 객체 형태의 스코프를 생성한다.

  • 식별자를 키로 등록하고 식별자에 바인딩된 값을 관리한다.

  • 외부 렉시컬 환경에 대한 참조를 통해 단방향(하위 → 상위) 링크드 리스트인 스코프 체인을 구현한다.

    스코프 체인

✅ 실행 컨텍스트 스택​

실행 컨텍스트 스택은 stack 자료구조로 관리되는 실행 컨텍스트를 의미한다.

const x = 1;

function foo () {
    const y = 2;
    
    function bar() {
        const z = 3;
        console.log(x + y + z);
    }
    bar();
}

foo(); //6

  • 실행 컨텍스트 스택의 최상위에 존재하는 실행 컨텍스트는 현재 실행중인 코드의 실행 컨텍스트이다.

    최상위 실행 컨텍스트

🧑🏻‍💻 실행 컨텍스트 생성​

✅ 전역 객체 생성​

  • 전역 객체는 전역 코드가 평가되기 이전에 생성된다.
  • 빌트인 전역 프로퍼티, 빌트인 전역 함수, 표준 빌트인 객체, 호스트 객체 등
  • 전역 객체도 Object.prototype을 상속 받는다.

✅ 전역, 함수 실행 컨텍스트 생성 과정 예시​

var x = 1;
const y = 2;

function foo (a) {
    var x = 3;
    const y = 4;
    
    function bar (b) {
        const z = 5;
        console.log(a + b + x + y + z);
    }
    bar(10);
}
foo(20);

소스 코드가 로드되면 JS 엔진은 전역 코드를 평가한다.

✏️ 전역 실행 컨텍스트​

  1. 전역 실행 컨텍스트 생성
  2. 전역 렉시컬 환경 생성
    1. 전역 환경 레코드 생성
      1. 객체 환경 레코드 생성 (var 전역 변수 등 관리)
      2. 선언적 환경 레코드 생성 (let, const 전역 변수 관리)
    2. this 바인딩
    3. 외부 렉시컬 환경에 대한 참조 결정

✏️ 함수 실행 컨텍스트​

  1. 함수 실행 컨텍스트 생성
  2. 함수 렉시컬 환경 생성
    1. 함수 환경 레코드 생성 (매개변수, arguments 등 관리)
    2. this 바인딩
    3. 외부 렉시컬 환경에 대한 참조 결정
실행 컨텍스트

참고 자료

  • 모던 자바스크립트 Deep Dive (사진 출처)